<template>
	<view class="information">
		<view class="information_head">
			<view class="nav_title " @click="navigateBack()">
				<view class="back"></view>
				填写信息
			</view>
		</view>
		<view class="information_content">
			<u-form :model="form" ref="form" :rules="rules">	
				<view v-if="step ==1" class="card">
					<span class="title">基本信息</span>
					<view class="form">
						<text class="must text_must">选择截图方式</text>
						<view class="mode">
							<view class="mode_item" v-for="(item, index) in checkboxList" :key="index" :name="item.name" :class="form.radio == index ? 'active': ''">
								<view  @click="form.radio = index">{{item.name}}</view>
							</view>
						</view>
					</view>
					
					<view class="form">
						<text class="must text_must">账号来源</text>
						<view class="mode">
							<view class="mode_item" v-for="(item, index) in scoreList" :key="index" :name="item.name" :class="form.radio == index ? 'active': ''">
								<view  @click="form.radio = index">{{item.name}}</view>
							</view>
						</view>
					</view>
					
					<u-form-item label-width="80" label="游戏账号" prop="name" required>
						<u-input v-model="form.name" placeholder="请输入游戏账号"/>
					</u-form-item>
					<u-form-item label-width="80" label="游戏密码" prop="password" required>
						<u-input v-model="form.password" placeholder="请输入游戏密码"/>
					</u-form-item>
					<u-form-item label-width="80" label="游戏售价" prop="price" required>
						<u-input v-model="form.price" placeholder="请输入游戏售价"/>
					</u-form-item>
				</view>
				<view v-if="step==2" class="card">
					<span class="title">账号信息</span>
					<u-form-item label-width="120"label="游戏版本" required>
						<u-radio-group v-model="form.radio" customStyle="myradio">
							<u-radio v-for="(item, index) in checkboxList" :key="index" :name="item.name" 
								:disabled="item.disabled" style="margin-right: 25rpx;">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label-width="80"label="游戏区服" required>
						<u-radio-group v-model="radio" customStyle="myradio" style="flex-wrap: wrap;">
							<u-radio v-for="(item, index) in scoreList" :key="index" :name="item.name" 
								:disabled="item.disabled" style="margin-right:25rpx;margin-bottom: 10rpx;">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					
					<u-form-item label-width="80" label="商品标题" prop="name" required>
						<u-input v-model="form.name" placeholder="请输入游戏账号"/>
					</u-form-item>
					<u-form-item label-width="80" label="截图备注" prop="password" required>
						<u-input v-model="form.password" placeholder="请输入游戏密码"/>
					</u-form-item>
					<u-form-item label-width="80" label="截图备注" prop="price" required>
						<u-input v-model="form.price" placeholder="请输入游戏售价"/>
					</u-form-item>
					<u-form-item label-width="100" label="上传封面图" prop="name" required>
						<u-upload :action="action" :file-list="fileList" ></u-upload>
					</u-form-item>
					<u-form-item label-width="100" label="上传游戏截图" prop="name" required>
						<u-upload :action="action" :file-list="fileList" ></u-upload>
					</u-form-item>
					
				</view>
			    <view v-if="step==2" class="card">
					<span class="title" >完善交易信息</span>
					<u-form-item label-width="80" label="联系手机" prop="name" required>
						<u-input v-model="form.name" placeholder="请输入游戏账号"/>
					</u-form-item>
					<u-form-item label-width="80" label="联系QQ" prop="password" required>
						<u-input v-model="form.password" placeholder="请输入游戏密码"/>
					</u-form-item>
					<u-form-item label-width="120"label="交易保障合同" required>
						<u-radio-group v-model="form.radio" customStyle="myradio">
							<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name" 
								:disabled="item.disabled" style="margin-right: 25rpx;">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label-width="120"label="是否接受议价" required>
						<u-radio-group v-model="radio" customStyle="myradio" style="flex-wrap: wrap;">
							<u-radio v-for="(item, index) in arr" :key="index" :name="item.name" 
								:disabled="item.disabled" style="margin-right:25rpx;margin-bottom: 10rpx;">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
			</u-form>
			<u-button class="submit_btn" @click="submit">{{step==1?'下一步':'立即发布'}}</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				step: 1,
				form: {
					name: '',
					radio: null,
					type:'1',
					password:'',
					price:''
				},
				rules: {
					name: [
						{
							required: true,
							message: '请输入姓名',
							trigger: 'blur,change'
						}
					]
				},
				action: 'http://www.example.com/upload',
				fileList: [],
				checkboxList: [
					{
						name: '自主截图',
						checked: false,
						disabled: false
					},
					{
						name: '客服截图',
						checked: false,
						disabled: false
					}
				],
				scoreList: [
					{
						name: '自己注册',
						checked: false,
						disabled: false
					},
					{
						name: '淘气游平台购买',
						checked: false,
						disabled: false
					},
					{
						name: '其他平台购买',
						checked: false,
						disabled: false
					}
				],
				radioList: [
					{
						name: '签署',
						checked: false,
						disabled: false
					},
					{
						name: '不签署',
						checked: false,
						disabled: false
					}
				],
				arr: [
					{
						name: '接受',
						checked: false,
						disabled: false
					},
					{
						name: '不接受',
						checked: false,
						disabled: false
					}
				]
			}
		},
		onPageScroll(e) {

		},
		onLoad() {

		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		onShow() {},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					console.log("提交表单信息:" + JSON.stringify(this.form))
					console.log(this.step)
					// uni.$u.toast('校验通过')
					// 调用服务端入表接口
					if(this.step==1) {
						this.step ++;
						console.log(this.step,'sss')
					}
				}).catch(errors => {
					console.log("失败信息:" + JSON.stringify(errors))
					// uni.$u.toast('校验失败')
				})
			},
			//选择图片
			chooseTheImg() {
				uni.chooseImage({
					count: 1, //图片可选择数量
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera', '海报图库'], //album 从相册选图，camera 使用相机，默认二者都有。
					success: res => {
						let imgFiles = res.tempFilePaths //图片的本地文件路径列表
						console.log('本地地址', imgFiles)
						this.uploadTheImg(imgFiles)
					}
				})
			},
			//上传图片
			uploadTheImg(imgFiles) {
				uni.uploadFile({
					url: `XXXXXX`, //后端用于处理图片并返回图片地址的接口
			 	header: {
			  	"Content-Type": "multipart/form-data", // formdata提交格式
					},
					filePath: imgFiles[0],
					name: 'uploadfile', // 默认
					formData: { // 其他的formdata参数
						fileType: '2',
						uid: '10001',
						fileContainerName: 'default'
					},
					success: res => {
						let data = JSON.parse(res.data) //返回的是字符串，需要转成对象格式，打印data如下图
						if (data.code == 200) {
							console.log(data.msg) //图片地址
						}
					},
					fail: () => {}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F7F8FA;
	}
</style>
<style lang="scss" scoped>
	.information {
		.information_head {
			background: white;
			.nav_title {
				padding: 25rpx;
				margin-bottom: 15rpx;
				font-weight: 800;
				font-size: 32rpx;
				color: #22150B;
				text-align: center;
				position: relative;
				.back {
					position: absolute;
					top: 15rpx;
					left: -18rpx;
					display: block;
					height: 30px;
					width: 30px;
					margin-left: 35rpx;
					background: url(~@/static/myshop/down_line@2x.png) no-repeat;
					background-size: 100%;
					transform: rotate(90deg);
				}
			}
		}
		.information_content {
			padding-bottom: 35rpx;
			.card {
				margin: 25rpx;
				padding: 25rpx;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #22150B;
				line-height: 46rpx;
			}
			.myradio {
				flex-wrap: wrap;
			}
			.submit_btn {
				margin: 55rpx auto;
				height: 88rpx;
				width: 94%;
				background: #FDD637;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
			}
			.must {
				display: flex;
				align-items: center;
				&::after{
					content: '*';
					color: #FF0000;
					margin-top: 25rpx;
					font-size: 45rpx;
					margin-left: 5rpx;
				}
			}
			
			.form {
				margin-top: 44rpx;
				> .text_must {
					font-weight: 500;
					font-size: 28rpx;
					color: #22150B;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.mode {
					display: flex;
					margin-top: 20rpx;
					.mode_item {
						padding: 0 32rpx;
						height: 48rpx;
						background: #F6F6F6;
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						margin-right: 16rpx;
						&:nth-child(4n) {
							margin-right: 0;
						}
						> view {
							font-size: 24rpx;
							color: #636677;
							line-height: 48rpx;
							text-align: center;
							font-style: normal;
						}
						
						
					}
					
					> .active {
						height: 48rpx;
						background: #FDD637;
						border-radius: 60rpx 60rpx 60rpx 60rpx;
						> view  {
							color: #000;
						}
					}
				}
			}
			
		}
	}
</style>
